<script setup>
import { onMounted, inject, reactive, nextTick } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  list: [],
  selectValue: 'day',
})

onMounted(() => {
  getBackHomeCount()
})

function autoScroll() {
  const el = document.querySelector('#tableList')
  const elHeight = el.offsetHeight
  const sHeight = el.scrollHeight
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++
    } else {
      el.scrollTop = 0
    }
  }, 50)
}

function getBackHomeCount() {
  $http
    .get('screen/report')
    .then(res => {
      const { data = [] } = res || {}

      dataObj.list = data || []
    })
    .then(nextTick)
    .then(() => {
      autoScroll()
    })
}
</script>

<template>
  <!-- <a href="/admin/#/yq/PersonBackHome" target="_blank" class="more">更多》</a> -->

  <div class="returnBox">
    <div class="title">返乡报备数据</div>

    <div class="tableBox">
      <div class="line">
        <div class="th" style="flex: 0.8">序号</div>
        <div style="flex: 1"><div class="tag">重点区域</div></div>
        <div class="th" style="flex: 0.8"><div class="tag">当日新增</div></div>
        <div class="th" style="flex: 0.8">累计</div>
        <div class="th" style="flex: 1"><div class="tag">集中隔离</div></div>
        <div class="th" style="flex: 1"><div class="tag">居家隔离</div></div>
      </div>
      <div class="table scroll" id="tableList">
        <div class="tr" v-for="(item, index) in dataObj.list" :key="index" ref="tableRef">
          <div style="flex: 0.8">{{ index }}</div>
          <div style="flex: 1; text-align: left">{{ item.label }}</div>
          <div style="flex: 0.8">{{ item.new }}</div>
          <div style="flex: 0.8">{{ item.total }}</div>
          <div style="flex: 1">{{ 0 }}</div>
          <div style="flex: 1">{{ 0 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.returnBox {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/home/boxbg5.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 24px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tableBox {
    flex: 1;
    padding: 28px 18px 33px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .line {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      height: 40px;
      font-size: 14px;
      color: #ffffff;

      .th {
        display: flex;
        justify-content: center;
      }

      .tag {
        width: 32px;
        height: 40px;
      }
    }
    .table {
      flex: 1;
      width: 100%;
      overflow: hidden auto;
      margin-top: 16px;

      .tr {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 56px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;

        &:nth-child(odd) {
          background: rgba(19, 181, 177, 0.4);
        }
      }
    }
  }
  a.more {
    color: #00f9ff;
    text-decoration: none;
  }
}
</style>
